<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>详情页</title>
  </head>
  <body>
    <div id="detail"></div>
    <script src="cart.js"></script>
    <script>
      let prodDatas = JSON.parse(localStorage.getItem("prodDatas"));
      let id = location.search.split("=")[1];
      let product = prodDatas[id]; //单个商品数据
      let oDetail = document.getElementById("detail");

      oDetail.innerHTML = `<img src="${product.imgsrc}"><p>${product.title}</p><p>${product.price}</p><p><span class="minus">-</span><input type="text" class="txt" value="1"><span class="plus">+</span></p><p><input type="button" class="addBtn" value="加入购物车"></p>`;

      let oMinus = document.querySelectorAll(".minus")[0];
      let oPlus = document.querySelectorAll(".plus")[0];
      let oTxt = document.querySelectorAll(".txt")[0];
      let oBtn = document.querySelectorAll(".addBtn")[0];

      oMinus.onclick = function () {
        if (oTxt.value <= 1) {
          oTxt.value = 1;
          return;
        }
        oTxt.value--;
      };
      oPlus.onclick = function () {
        oTxt.value++;
      };

      let cart = new Cart();
      oBtn.onclick = function () {
        cart.saveData(id, Number(oTxt.value), false);
        location.href = "cart.html";
      };
    </script>
  </body>
</html>
